<template>
  <div class="box">
    <div class="box-left">
      <h1>图书系统</h1>
      <aside>
        <ul style="list-style-type: none">
          <li><router-link to="/library-management">图书管理</router-link></li>
          <li>
            <router-link to="/borrowing-management">借阅管理</router-link>
          </li>
          <li><router-link to="/user-management">用户信息</router-link></li>
          <li><router-link to="/system-settings">系统设置</router-link></li>
        </ul>
      </aside>
    </div>
    <div class="box-right">
      <router-view />
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  methods: {},
};
</script>
<style scoped>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background: #f0f2f5;
  font-family: "Segoe UI", "Microsoft Yahei", sans-serif;
  color: #333;
}

.box {
  display: flex;
  min-height: 100vh;
  width: 60%;
  background: linear-gradient(to right, #f8f9fa 0%, #e9ecef 100%);
}

.box-left {
  width: 220px;
  background-color: #2c3e50;
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: fixed;
  height: 100%;
  box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

.box-left:hover {
  background-color: #34495e;
}

.box-left h1 {
  font-size: 24px;
  margin: 30px 0 20px;
  text-align: center;
  letter-spacing: 1px;
}

.box-left aside {
  flex: 1;
  width: 100%;
}

.box-left ul {
  list-style-type: none;
  padding: 0;
}

.box-left li {
  padding: 18px 0;
  text-align: center;
  transition: all 0.3s ease;
}

.box-left a {
  color: #ffffffcc;
  text-decoration: none;
  display: block;
  padding: 10px 24px;
  font-weight: 500;
  transition: all 0.3s ease;
  border-left: 4px solid transparent;
}

.box-left a:hover,
.box-left a.router-link-exact-active {
  background-color: #3498db;
  color: #ffffff;
  transform: scale(1.05);
}
</style>